<template>
  <div class="print-style">
    <!-- 使用vue-print-nb方法 -->
    <el-dialog
      :visible.sync="printDialogVisible"
      width="50%"
      height="500"
      class="dialog"
      :fullscreen="fullscreen"
    >
      <div slot="title" class="title">
        <span>{{ printTitle }}</span>
        <span @click="fullscreen = !fullscreen" class="title_btn">
          <i class="icon el-icon-full-screen" v-if="!fullscreen"></i>
          <i class="icon el-icon-minus" v-if="fullscreen"></i>
        </span>
      </div>
      <div style="main">
        <printFun></printFun>
        <div id="printArea" style="page-break-after: always">
          <div class="print_content">
            <slot name="perpage"></slot>
            <!-- <div class="perpage"></div> -->
          </div>
          <!-- <printContent></printContent> -->
          <table v-if="column.length > 0" border=".5" class="print-table">
            <thead class="p-head">
              <tr>
                <th v-for="(item, index) in column" :key="index">
                  {{ item.label }}
                </th>
              </tr>
            </thead>
            <tbody class="p-body">
              <tr v-for="(item1, index1) in dataList" :key="index1">
                <td v-for="(value, key) in column" :key="key" align="center">
                  {{ item1[value.prop] }}
                </td>
              </tr>
              <slot />
            </tbody>
          </table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="printDialogVisible = false" size="mini"
          >取 消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import printFun from "./print-fun.vue";
// import printContent from "./printContent.vue";
export default {
  components: { printFun },
  props: {
    // 弹窗标题
    printTitle: {
      type: String,
      default: "弹窗标题",
    },
    // 表格列
    column: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 表格数据
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      printDialogVisible: false,
      fullscreen: false,
    };
  },
  created() {},
  mounted() {},
  // watch() {},
  methods: {},
};
</script>

<style scoped lang="scss"  media="print">
.print-style {
  ::v-deep .el-dialog__body {
    height: 500px;
    overflow: auto;
  }
}
.print-table {
  margin-top: 10px;
  width: 100%;
  border: 0.5px solid #ccc;
  border-collapse: collapse;
  padding: 0;
}
.p-head {
  background-color: #fafafa;
  line-height: 30px;
}
.p-body {
  line-height: 30px;
}
.print_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.perpage {
  margin-top: 10px;
  background-color: #cfe8cc;
  page-break-after: always;
  width: 100%;
  height: 742.5px;
}
</style>
